@element: 'checkbox';
@import (multiple) 'theme.less';

@import url('editor-framework://dist/css/globals/fontello.css');

:host {
  display: inline-block;
  position: relative;
  flex: none;
  outline: none;

  margin: 0 0.25em 0 0;
  font-size: @medium;

  white-space: nowrap;
  line-height: @box_size;

  cursor: pointer;
  color: @text_color;
}

.box {
  position: absolute;
  top: 0px;
  left: 0px;

  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;

  width: @box_size;
  height: @box_size;
  min-width: @box_size;
  min-height: @box_size;

  border: 1px solid @box_color;
  box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);

  background: @box_bg_color;
  cursor: pointer;
}

.checker {
  position: absolute;
  top: 0px;
  left: -2px;

  font-size: @checker_size;
  width: @checker_size;
  height: @checker_size;

  visibility: hidden;
  color: @checker_color;
}

label {
  cursor: pointer;
  padding-left: @box_size + @label_offset;

  vertical-align: middle;
}

:host([checked]) {
  .checker {
    visibility: visible;
  }
}

:host(:hover) {
  color: @text_color_hover;

  .box {
    border-color: @box_color_hover;
  }
}

:host([focused]) {
  color: @focus_color;

  .box {
    border-color: @focus_color;
  }
}

:host([pressed]) {
  .box {
    border-color: @focus_color - 50%;
  }

  .checker {
    opacity: 0.5;
  }
}

:host([unnavigable]) {
  color: @text_color;

  .box {
    border: 0;
    border-bottom: 1px solid #555;
  }

  .checker {
    top: 1px;
    left: -1px;
  }
}

:host([unnavigable]:hover) {
  color: @text_color_hover;
}

:host([disabled]) {
  pointer-events: none;
  color: @text_color - 90%;

  .checker {
    color: @text_color - 90%;
  }

  .box {
    border-color: @box_color - 50%;
    background: @box_bg_color + 20%;
  }
}
